<template>
  <div class="article-Detail">
    <van-nav-bar left-text="" left-arrow @click-left="bbback">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="box">
      <!-- 标题区域 -->
      <div class="title" ref="title">
        {{ articleInfo.title }}
      </div>
      <!-- 用户区域 -->
      <div class="users" v-if="!fixed">
        <div class="user">
          <img
            :src="articleInfo.aut_photo"
            alt=""
            @click="$router.push('/userZone')"
          />
          <div class="info">
            <div class="username">{{ articleInfo.aut_name }}</div>
            {{ articleInfo.pubdate | mydayjstime }}
          </div>
        </div>
        <div
          class="btn follow"
          v-if="getMyprop(articleInfo.aut_id)"
          @click="cancelfollow"
        >
          <span class="btn-text">已关注</span>
        </div>
        <div class="btn" v-else @click="follow">
          <span class="add">+</span>
          <span class="btn-text">关注</span>
        </div>
      </div>
      <van-nav-bar left-text="" class="users-fixed" v-else>
        <template #left>
          <van-icon name="arrow-left" @click="$router.back()" />
          <div class="user">
            <img
              :src="articleInfo.aut_photo"
              alt=""
              @click="$router.push('/userZone')"
            />
            {{ articleInfo.aut_name }}
            <!-- <div class="info">
              <div class="username">天涯小行客</div>
            </div> -->
          </div>
        </template>
        <template #right>
          <div
            class="btn follow"
            v-if="getMyprop(articleInfo.aut_id)"
            @click="cancelfollow"
          >
            <span class="btn-text">已关注</span>
          </div>
          <div class="btn" v-else @click="follow">
            <span class="add">+</span>
            <span class="btn-text">关注</span>
          </div>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-nav-bar>
      <!-- 文章内容区域 -->
      <div
        class="content"
        v-html="articleInfo.content"
        style="white-space:pre-wrap"
      ></div>
      <!-- 操作区域 -->
      <div class="handler">
        <!-- 点赞按钮 -->
        <van-button
          plain
          class="btn-star"
          :class="{ active: getArtStatus(1) }"
          @click="star"
        >
          <van-icon name="good-job-o" size="20" />
          点赞
        </van-button>
        <!-- 讨厌按钮 -->
        <van-button plain :class="{ active: getArtStatus(0) }" @click="disLike">
          <van-icon name="delete-o" size="20" />
          不喜欢
        </van-button>
      </div>
      <!-- 猜你喜欢区域 -->
      <div class="guessLike">
        <div class="title">猜你喜欢</div>
        <ul class="items">
          <li class="item">了解微信小程序</li>
          <li class="item">了解微信小程序</li>
          <li class="item">了解微信小程序</li>
          <li class="item">了解微信小程序</li>
          <li class="item">了解微信小程序</li>
          <li class="item">了解微信小程序</li>
        </ul>
      </div>
      <!-- 广告区域 -->
      <div class="poster">
        <div class="poster-box">
          <img src="../../../assets/科比.jpg" alt="" />
          <div class="text">
            前端与移动开发-课程升级V6.0 高薪技术全覆盖 <br />学前端
            选择-传智播客
          </div>
        </div>
      </div>
      <!-- 评论区域 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="0"
        @load="onLoad"
      >
        <div id="comment">
          <div class="comment" v-if="comList.length > 0">
            <div class="item" v-for="(item, index) in comList" :key="index">
              <div class="left">
                <img :src="item.aut_photo" alt="" />
              </div>
              <div class="right">
                <div class="user">
                  <span class="username">
                    {{ item.aut_name }}
                  </span>
                  <van-icon
                    name="good-job-o"
                    @click="comStar(item)"
                    :class="{ pinglunstar: item.is_like }"
                  />
                  <span class="star"> {{ item.like_count }}</span>
                </div>
                <div class="comContent">
                  {{ item.content }}
                </div>
                <div class="comInfo">
                  <span class="time">{{ item.pubdate | mydayjstime }}</span>
                  <span class="replySum" @click="showPopup(index)">
                    {{ item.reply_count }}回复</span
                  >
                </div>
              </div>
            </div>
            <van-divider>人家是有底线的</van-divider>
          </div>
          <div class="comment" v-else>
            <van-divider>暂无更多评论</van-divider>
          </div>
        </div>
      </van-list>
    </div>
    <van-popup v-model="show" position="bottom">
      <div class="replyComBox">
        <van-nav-bar class="reply-nav">
          <template #title>{{ replyComList.length }}条回复</template>
          <template #left>
            <van-icon name="cross" @click="openPop" />
          </template>
        </van-nav-bar>
        <div class="item">
          <div class="left">
            <img :src="currentCom.aut_photo" alt="" />
          </div>
          <div class="right">
            <div class="user">
              <span class="username">
                {{ currentCom.aut_name }}
              </span>
              <span class="guanzhu">关注</span>
              <!-- <span class="guanzhu">已关注</span> -->
            </div>
            <div class="comContent">
              {{ currentCom.content }}
            </div>
            <div class="comInfo">
              <span class="time">{{ currentCom.pubdate | mydayjstime }}</span>
              <van-icon name="good-job-o" class="good" />
              <span class="starSum">{{ currentCom.like_count }}</span>
            </div>
          </div>
        </div>
        <div class="ReplyCom">
          <span class="title"> 全部评论 </span>
          <div class="items">
            <div
              class="item notTop"
              v-for="(item, index) in replyComList"
              :key="index"
            >
              <div class="left">
                <img :src="item.aut_photo" alt="" />
              </div>
              <div class="right">
                <div class="user">
                  <span class="username">
                    {{ item.aut_name }}
                  </span>
                  <span class="guanzhu">关注</span>
                </div>
                <div class="comContent">
                  {{ item.content }}
                </div>
                <div class="comInfo">
                  <span class="time">{{ item.pubdate | mydayjstime }}</span>
                  <van-icon name="good-job-o" class="good" />
                  <span class="starSum">{{ item.like_count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 输入框 -->
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="写评论"
          @search="replyComent"
          @cancel="onCancel"
          left-icon="edit"
        />
      </form>
    </van-popup>
    <!-- 底部评论输入 -->
    <div class="footer">
      <input
        v-model="value2"
        type="text"
        name=""
        placeholder="写评论"
        class="ipt"
        @keyup.enter="comment"
      />
      <i class="iconfont icon-comment1" @click="toCom"
        ><span>{{ comList.length }}</span></i
      >
      <i
        class="iconfont icon-star center"
        :class="{ yellow: getArtCollect() }"
        @click="collect"
      ></i>
      <i class="iconfont icon-share" @click="openShare"></i>
    </div>
    <van-popup v-model="shareShow" position="bottom" class="aabb">
      <ul class="shareTarger">
        <li>
          <img src="../../../assets/weixin.png" alt="" />
          <span>微信</span>
        </li>
        <li>
          <img src="../../../assets/pyq.png" alt="" />
          <span>朋友圈</span>
        </li>
        <li>
          <img src="../../../assets/qq.png" alt="" />
          <span>QQ</span>
        </li>
        <li>
          <img src="../../../assets/weibo.png" alt="" />
          <span>微博</span>
        </li>
        <li>
          <van-icon name="setting-o" />
          <span>显示设置</span>
        </li>
        <li>
          <van-icon name="warning-o" @click="jubaoShow" />
          <span>举报</span>
        </li>
      </ul>
      <van-button type="primary" size="large" @click="closePop"
        >取消</van-button
      >
    </van-popup>
    <van-popup v-model="jubaoshow" class="jubao">
      <van-picker
        title="举报原因"
        show-toolbar
        :columns="jubaotype"
        @confirm="jubao(index)"
        @cancel="quxiaojubao"
        @change="onChange"
      >
        <template #columns-bottom
          ><van-field
            v-model="message"
            rows="3"
            autosize
            label="其他问题"
            type="textarea"
            placeholder="请描述其他问题"
            class="shuruk"/></template
      ></van-picker>
    </van-popup>
  </div>
</template>
<script>
import {
  getNewsArticleDetail,
  getCommentsOrApply,
  addApplyComments,
  GiveLikeArticle,
  DislikeArticle,
  cancelGiveLike,
  cancelDislike,
  getCollectArticle,
  cancelCollectedArticle,
  reportArticle,
  GiveLikeCommentsOrApply,
  cancelCommentsOrApplyGiveLike
} from '../../../api/news.js'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import { attention, Cancelattention } from '../../../api/user.js'
export default {
  data () {
    return {
      fixed: false,
      show: false,
      value: '',
      value2: '',
      articleInfo: '',
      articleId: '',
      comList: [],
      currentCom: {},
      replyComList: [],
      shareShow: false,
      loading: false,
      finished: false,
      offset: -5,
      limit: 5,
      jubaoshow: false,
      message: '',
      index: '',
      jubaotype: [
        '其他问题',
        '标题夸张',
        '低俗色情',
        '错别字多',
        '旧闻重复',
        '广告软文',
        '内容不实',
        '涉嫌违法犯罪',
        '侵权'
      ]
    }
  },
  computed: {
    ...mapGetters(['getMyprop', 'getArtStatus', 'getArtCollect']),
    ...mapState(['followList', 'followIdList', 'currentArt', 'searchList']),
    ee () {
      return this.comList
    }
    // ff () {}
  },
  async created () {
    this.articleId = this.$route.params.id
    console.log(this.articleId)
    const res = await getNewsArticleDetail(this.articleId)
    const a = 'a'
    const resa = await getCommentsOrApply(a, this.articleId)
    console.log(this.articleId)
    console.log(111)
    this.comList = resa.data.data.results
    console.log(this.comList)
    this.setCurrentArt(res.data.data)
    this.articleInfo = res.data.data
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    ...mapMutations(['setCurrentArt']),
    ...mapActions(['setFlIdList', 'getCurArt']),
    onChange (picker, value, index) {
      this.index = index
    },
    async comStar (item) {
      if (item.is_liking) {
        const res = cancelCommentsOrApplyGiveLike(item.com_id)
        console.log(res)
        const a = 'a'
        const resa = await getCommentsOrApply(a, this.articleId)
        console.log(this.articleId)
        console.log(111)
        this.comList = resa.data.data.results
        console.log(this.comList)
        return
      }
      const res = await GiveLikeCommentsOrApply({ target: item.com_id })
      console.log(res)
      const a = 'a'
      const resa = await getCommentsOrApply(a, this.articleId)
      console.log(this.articleId)
      console.log(111)
      this.comList = resa.data.data.results
    },
    openShare () {
      this.shareShow = true
    },
    jubaoShow () {
      this.jubaoshow = true
    },
    quxiaojubao () {
      this.jubaoshow = false
    },
    async jubao () {
      console.log()
      this.$toast({
        type: 'loading',
        message: '加载中',
        duration: 0
      })
      const res = await reportArticle({
        target: this.articleId,
        type: this.index,
        remark: this.message
      })
      this.jubaoshow = false
      this.shareShow = false
      this.$toast.success('举报成功')
      console.log(res)
    },
    async onLoad () {
      this.offset += this.limit
      const a = 'a'
      const resa = await getCommentsOrApply(
        a,
        this.articleId,
        this.offset,
        this.limit
      )
      console.log(this.articleId)
      console.log(111)
      this.comList.push(resa.data.data.results)
    },
    bbback () {
      if (this.searchList.length > 0) {
        this.$router.back()
        return
      }
      this.$router.push('/search')
    },
    closePop () {
      this.shareShow = false
    },
    toCom () {
      // counter1是绑定的点击事件名称
      const returnEle = document.querySelector('#comment')
      // productId是将要跳转区域的id
      if (returnEle) {
        returnEle.scrollIntoView(true) // true 是默认的
      }
      // document.querySelector('counter1').scrollIntoView(true) // 这里的counter1是将要返回地方的id
    },
    async star () {
      if (this.currentArt.attitude === 1) {
        const res = await cancelGiveLike(this.currentArt.art_id)
        this.getCurArt(this.currentArt.art_id)
        console.log(res)
        return
      }
      const res = await GiveLikeArticle({ target: this.currentArt.art_id })
      this.getCurArt(this.currentArt.art_id)
      console.log(res)
    },
    async disLike () {
      if (this.currentArt.attitude === 0) {
        const res = await cancelDislike(this.currentArt.art_id)
        this.getCurArt(this.currentArt.art_id)
        console.log(res)
        return
      }
      const res = await DislikeArticle({ target: this.currentArt.art_id })
      this.getCurArt(this.currentArt.art_id)
      console.log(res)
    },
    async cancelfollow () {
      this.$toast({
        type: 'loading',
        message: '加载中',
        duration: 0
      })
      const res = await Cancelattention(this.articleInfo.aut_id)
      this.setFlIdList()
      this.$toast.success('取消关注成功')
      console.log(res)
    },
    async collect () {
      if (this.currentArt.is_collected) {
        const res = await cancelCollectedArticle(this.currentArt.art_id)
        this.getCurArt(this.currentArt.art_id)
        console.log(res)
        return
      }
      const res = await getCollectArticle({ target: this.currentArt.art_id })
      this.getCurArt(this.currentArt.art_id)
      console.log(res)
    },
    async follow () {
      this.$toast({
        type: 'loading',
        message: '加载中',
        duration: 0
      })
      const res = await attention({ target: this.articleInfo.aut_id })
      this.setFlIdList()
      this.$toast.success('关注成功')
      console.log(res)
    },
    async showPopup (index) {
      this.show = true
      const c = 'c'
      this.currentCom = this.comList[index]
      console.log(this.currentCom)
      const res = await getCommentsOrApply(c, this.currentCom.com_id.toString())
      console.log(res)
      this.replyComList = res.data.data.results
    },
    onCancel () {
      this.show = false
    },
    async replyComent () {
      this.show = false
      console.log(456)
      this.$toast({
        type: 'loading',
        message: '加载中',
        duration: 0
      })
      const res = await addApplyComments({
        target: this.currentCom.com_id,
        content: this.value,
        art_id: this.articleId
      })
      this.$toast.success('回复评论成功')
      console.log(res)
      this.value = ''
    },
    async comment () {
      this.$toast({
        type: 'loading',
        message: '加载中',
        duration: 0
      })
      const res = await addApplyComments({
        target: this.articleId,
        content: this.value2
      })
      const a = 'a'
      const resa = await getCommentsOrApply(a, this.articleId)
      console.log(this.articleId)
      console.log(111)
      this.comList = resa.data.data.results
      this.$toast.success('评论成功')
      console.log(res)
      this.value2 = ''
    },
    openPop () {
      this.show = false
    },
    handleScroll () {
      const top = 46 + this.$refs.title.offsetHeight
      const scrollTop =
        window.pageYOffset ||
        (document.ducumentElement && document.ducumentElement.scrollTop) ||
        document.body.scrollTop
      if (scrollTop >= top) {
        this.fixed = true
      } else {
        this.fixed = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.article-Detail {
  .pinglunstar {
    color: red;
  }
  .jubao {
    width: 90%;
    padding: 15px;
    text-align: center;
    .van-picker {
      .van-picker__columns {
        padding-bottom: 50px;
      }
      /deep/ .van-cell__value.van-field__value {
        margin-top: 20px;
        background-color: #f5f6f9;
      }
      /deep/ .van-cell__title.van-field__label {
        padding-top: 20px;
      }
    }
  }
  /deep/ img {
    width: 100%;
  }
  .van-popup.van-popup--bottom.aabb {
    background-color: transparent;
    padding: 0 15px;
    .shareTarger {
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      padding-top: 6px;
      padding-bottom: 6px;
      margin-bottom: 8px;
      border-radius: 10px;
      li {
        display: flex;
        flex-direction: column;
        padding: 20px 20px;
        text-align: center;
        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          margin-bottom: 15px;
        }
        span {
          font-size: 14px;
        }
        .van-icon {
          margin-bottom: 15px;
          font-size: 30px;
        }
      }
    }
    /deep/ .van-button {
      background-color: #fff;
      color: #424242;
      border: 1px solid #fff;
      border-radius: 10px;
      margin-bottom: 8px;
    }
  }
  .replyComBox {
    background-color: #fff;
    .title {
      font-size: 16px;
      color: #2c2c2c;
      padding-left: 15px;
    }
    background-color: #fff;
    position: relative;
    .van-nav-bar.reply-nav {
      position: absolute;
      background-color: #fff;
      top: -30px;
      width: 100%;
      color: #252525;
      /deep/ .van-nav-bar__content {
        background-color: #fff;
        .van-icon.van-icon-cross {
          color: #232323;
        }
      }
    }
    .item.notTop {
      padding-top: 0;
    }
    .item {
      padding: 40px 15px 15px;
      margin-top: 30px;
      display: flex;
      margin-bottom: 20px;
      border-bottom: 1px solid #e6e0e0;
      .left {
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .right {
        flex: 1;
        margin-left: 10px;
        .user {
          font-size: 12px;
          color: #2c2c2c;
          display: flex;
          .username {
            flex: 1;
            font-size: 14px;
            color: #42679a;
            line-height: 22px;
          }
          .guanzhu {
            color: #f96969;
            font-size: 14px;
            line-height: 22px;
          }
        }
        .comContent {
          margin-top: 15px;
          font-size: 18px;
          line-height: 24px;
          padding-right: 2px;
        }
        .comInfo {
          display: flex;
          margin-top: 10px;
          font-size: 12px;
          .time {
            flex: 1;
            margin-right: 15px;
          }
          .van-icon.good {
            font-size: 18px;
            margin-right: 2px;
          }
          .starSum {
            line-height: 22px;
          }
        }
      }
    }
  }
  position: relative;
  /deep/.van-nav-bar__content {
    background-color: #3296fa;
  }
  /deep/.van-nav-bar .van-icon {
    color: whitesmoke;
    font-size: 22px;
  }
  .box {
    .title {
      padding: 0 15px;
      font-size: 22px;
      padding-top: 20px;
      font-weight: 700;
      padding-bottom: 25px;
      white-space: pre-wrap;
      word-break: break-all;
      word-wrap: break-word;
    }
    .users-fixed {
      position: fixed;
      top: 0;
      width: 100%;
      /deep/ .van-nav-bar__content {
        background-color: #f5f5f5;
        padding-top: 5px;
      }
      /deep/ .van-icon.van-icon-arrow-left {
        color: #4a4a4a;
        margin-right: 10px;
        font-size: 24px;
      }
      .user {
        display: flex;
        flex: 1;
        font-size: 14px;
        color: #3a3a3a;
        line-height: 32px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .follow.btn {
        background-color: #fff;
        border: 1px solid #ccc;
        line-height: 20px;
        color: #333;
      }
      .btn {
        background-color: #3296fa;
        padding: 0px 15px;
        height: 28px;
        color: #fff;
        border-radius: 14px;
        margin-right: 20px;
        .add {
          font-size: 20px;
          line-height: 26px;
          margin-right: 5px;
        }
        .btn-text {
          font-size: 14px;
          line-height: 22px;
        }
      }

      .van-icon-ellipsis::before {
        color: #333333;
        font-size: 30px;
      }
    }
    .users {
      padding: 0 15px;
      display: flex;
      .user {
        display: flex;
        flex: 1;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .info {
          margin-left: 10px;
          font-size: 12px;
          color: #b9b9b9;
          .username {
            font-size: 14px;
            color: #3a3a3a;
          }
        }
      }
      .follow.btn {
        background-color: #fff;
        border: 1px solid #ccc;
        line-height: 20px;
        color: #333;
      }
      .btn {
        background-color: #3296fa;
        padding: 0px 20px;
        height: 28px;
        color: #fff;
        line-height: 20px;
        border-radius: 14px;
        .add {
          font-size: 20px;
          line-height: 24px;
        }
        .btn-text {
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
    .content {
      box-sizing: border-box;
      padding: 0 15px;
      font-size: 18px;
      margin-top: 30px;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;
      width: 100%;
      /deep/ .pgc-img {
        margin-bottom: 10px;
        img {
          width: 100%;
        }
      }
      /deep/ pre {
        white-space: -moz-pre-wrap;

        white-space: -pre-wrap;

        white-space: -o-pre-wrap;

        word-wrap: break-word;
        width: 100%;
        white-space: pre-wrap;
        /deep/ p {
          /deep/ a {
            /deep/ span {
              /deep/ .z-ico-video {
                white-space: -moz-pre-wrap;

                white-space: -pre-wrap;

                white-space: -o-pre-wrap;

                word-wrap: break-word;
                width: 100%;
                white-space: pre-wrap;
              }
            }
          }
        }
        /deep/ .hljs {
          width: 100%;
          white-space: pre-wrap;
        }
      }
      /deep/ .cnblogs_code {
        width: 100%;
        pre {
          width: 100%;
          white-space: pre-wrap;
          span {
            width: 100%;
          }
        }
      }
    }
    .guessLike {
      padding: 0 15px;
      margin-top: 30px;
      .title {
        font-size: 18px;
        margin-bottom: 15px;
      }
      .items {
        display: flex;
        flex-wrap: wrap;
        .item {
          padding-left: 10px;
          color: #666666;
          font-size: 16px;
          margin-bottom: 15px;
          width: 50%;
        }
      }
    }
    .handler {
      padding: 0 15px;
      margin-top: 30px;
      text-align: center;
      .active {
        border-color: #ff4444;
        color: #ff4444;
      }
      .btn-star {
        margin-right: 30px;
      }
      .van-button {
        width: 103px;
        border-radius: 20px;
        .van-icon {
          vertical-align: middle;
        }
      }
    }
    .poster {
      padding: 0 15px;
      .poster-box {
        border: 1px solid #efefef;
        padding: 15px;
        img {
          width: 100%;
          height: 180px;
        }
        .text {
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
    .comment {
      padding: 0 15px 50px;
      margin-top: 30px;
      margin-bottom: 30px;
      .item {
        display: flex;
        margin-bottom: 30px;
        .left {
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .right {
          flex: 1;
          margin-left: 10px;
          .user {
            font-size: 12px;
            color: #2c2c2c;
            display: flex;
            .username {
              flex: 1;
              font-size: 14px;
              color: #42679a;
              line-height: 22px;
            }
            .van-icon {
              font-size: 18px;
              margin-right: 2px;
            }
            .star {
              line-height: 22px;
            }
          }
          .comContent {
            margin-top: 15px;
            font-size: 18px;
            line-height: 24px;
            padding-right: 2px;
          }
          .comInfo {
            margin-top: 10px;
            font-size: 12px;
            .time {
              margin-right: 15px;
            }
            .replySum {
              background-color: #f4f5f6;
              padding: 6px 12px;
              border-radius: 12px;
            }
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    background-color: #fff;
    padding: 0 15px;
    position: fixed;
    bottom: 0;
    height: 56px;
    border-top: 1px solid #dcdcdc;
    line-height: 56px;
    .ipt {
      height: 32px;
      border: 1px solid #eaeaea;
      font-size: 16px;
      color: #a7a7a7;
      border-radius: 20px;
      padding-left: 15px;
      margin-right: 20px;
      width: 200px;
    }
    i {
      position: relative;
      font-size: 28px;
      line-height: 56px;
      vertical-align: middle;
      span {
        position: absolute;
        font-size: 10px;
        top: 0px;
        right: -8px;
        background-color: red;
        height: 15px;
        line-height: 12px;
        border-radius: 50%;
        padding: 2px;
        color: #fff;
      }
    }
    .yellow {
      color: gold;
    }
    .center {
      margin: 0 20px;
    }
  }
}
</style>
